<template>
    <div class="building">
        <ul>
            <li v-for="(item, index) in roadList" :key="index">
                <div class="left">{{ item.name }}</div>
                <!-- 根据传入的showOption参数判断显示内容 -->
                <template v-if="showOption === 'right'">
                    <div class="right">{{ item.value }}</div>
                </template>
                <template v-else>
                    <div class="infor">
                        <div :class="['type', item.typeClass]">{{ item.type }}</div>
                        <div class="view">
                            <button @click="handlePrint(item)">查看</button>
                        </div>
                    </div>
                </template>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        // 接收道路信息列表数据
        roadList: {
            type: Array,
            required: true
        },
        // 用于控制显示right还是infor内容的参数，可选值为'right'或'infor'
        showOption: {
            type: String,
            default: 'infor',
            validator(value) {
                return ['right', 'infor'].includes(value);
            }
        }
    },
    methods: {
        // 点击查看按钮时，触发父组件的事件，并将当前道路信息作为参数传递给父组件
        handlePrint(item) {
            // this.$emit('print', item);
        }
    }
}

</script>
<style lang="scss" scoped>
ul {
    border: 1px solid #b7c6d8;
    border-radius: 5px;

    li {

        border-bottom: 1px solid #b7c6d8;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        cursor: pointer;
        color: #495057;
        display: flex;
        justify-content: space-between;

        .right {
            margin-right: 10px;
        }

        .infor {
            width: 43%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        li:hover {
            color: #000;
        }

        li:last-child {
            border-bottom: none;
        }

        .type {
            width: 33px;
            height: 17px;
            line-height: 17px;
            color: #fff;
            outline-offset: 3px;
            text-align: center;
            border-radius: 2px
        }

        .big {
            background-color: #245fae;
            outline: 1px solid #245fae;
        }

        .middle {
            background-color: #2c998d;
            outline: 1px solid #2c998d;
        }

        .small {
            background-color: #ffb31b;
            outline: 1px solid #ffb31b;
        }

        .min {
            background-color: #e4515e;
            outline: 1px solid #e4515e;
        }

        button {
            width: 50px;
            height: 25px;
            line-height: 17px;
            border-radius: 2px;
            background-color: #409EFF;
            color: #fff;
            border: none;
            margin-right: 20px;
        }
    }

    li:hover {
        color: #000;
    }

    li:last-child {
        border-bottom: none;
    }
}
</style>